import { createApp, useReactive } from '../MVVM'

function App() {
  const state = useReactive({
    count: 0,
    name: 'wgf'
  })

  console.log(state.count)
  state.count += 1

  const add = function (num) {
    state.count += num;
  }

  const minus = function (num) {
    state.count -= num;
  }

  const changeName = function (name) {
    state.name = name
  }

  return {
    template: `
      <h1>{{ count }}</h1>
      <h2>{{ name }}</h2>
      <button onClick="add(2)">+2</button>
      <button onClick="minus(1)">-</button>
      <button onClick="changeName('New Name')">changeName</button>
    `,
    state,
    methods: {
      add,
      minus,
      changeName
    }
  }
}

createApp(
  App(),
  document.querySelector('#app')
)